<template>
  <div class="GroupBuy">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>团购管理</el-breadcrumb-item>
    </el-breadcrumb>
    <main>
      <div class="top">
        <li>
          <span>搜索：</span>
          <el-input
            placeholder="请输入团购名称"
            icon="search"
            v-model="val"
            class="search-input"
          >
          </el-input>
        </li>
        <li>
          <el-select
            v-model="filterType"
            @change="Change"
            placeholder="选择类型"
          >
            <el-option
              v-for="(state, index) in statuses"
              :key="state"
              :label="state"
              :value="index"
            ></el-option>
          </el-select>
        </li>
      </div>
      <!-- 表格 -->
      <el-table :data="tables" border stripe style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column label="图片" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-html="showDate(scope.row.pic)">
              {{ scope.row.pic }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="楼盘名称" width="120">
          <template slot-scope="scope">
            <span
              style="margin-left: 10px"
              v-html="showDate(scope.row.title)"
              >{{ scope.row.title }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="楼盘地址" width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-html="showDate(scope.row.area)">{{
              scope.row.area
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发起人" width="80">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-html="showDate(scope.row.name)">{{
              scope.row.name
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="起始时间" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-html="showDate(scope.row.time)">{{
              scope.row.time
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <span
              style="margin-left: 10px"
              v-html="showDate(scope.row.state)"
              >{{ scope.row.state }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" width="120">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑弹窗 -->
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="文章标题" :label-width="formLabelWidth">
            <el-input v-model="form.pic" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="文章标题" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="文章标题" :label-width="formLabelWidth">
            <el-input v-model="form.area" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建人" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建日期" :label-width="formLabelWidth">
            <el-input v-model="form.time" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-input v-model="form.state" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      val: "", /// 搜索关键字
      show: false,
      form: {
        pic: "",
        title: "",
        area: "",
        name: "",
        time: "",
        state: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
      statuses: ["未开团", "已开团"],
      filterType: "",
    }
  },
  created() {
    this.$api.getGrop().then((res) => {
      this.tableData = res.data.data.data
    })
  },
  computed: {
    // 实时监听表格
    tables: function () {
      const val = this.val;
      if (val) {
        return this.tableData.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(val) > -1;
          })
        })
      }
      return this.tableData
    }
  },
  methods: {
    /// 下拉筛选
    Change() {
      if (this.filterType === 0) {
        this.$api.switchGrop({ type: "未开团" }).then((res) => {
          this.tableData = res.data.data;
        })
      }else {
        this.$api.switchGrop({ type: "已开团" }).then((res) => {
          this.tableData = res.data.data;
        })
      }
    },
    /// 确定编辑数据
    submit() {
      this.dialogFormVisible = false;
      this.$api
        .editGrop({
          id: this.form.id,
          pic: this.form.pic,
          title: this.form.title,
          area: this.form.area,
          name: this.form.name,
          time: this.form.time,
          state: this.form.state,
        })
        .then((res) => {
          console.log(res, "edit");
          this.$message.success(res.data.message);
          this.$api.getGrop().then((res) => {
            this.tableData = res.data.data.data;
          })
        })
    },
    /// 编辑回显数据
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.form.id = row.id;
      this.form.pic = row.pic;
      this.form.title = row.title;
      this.form.area = row.area;
      this.form.name = row.name;
      this.form.time = row.time;
      this.form.state = row.state;
    },
    // 筛选变色
    showDate(value) {
      value = value + "";
      if (value.indexOf(this.val) !== -1 && this.val !== "") {
        return value.replace(
          this.val,
          '<font color="#f00">' + this.val + "</font>"
        );
      } else {
        return value;
      }
    },
    /// 删除表格数据
    handleDelete(index, row) {
      console.log(index, row);
      this.$api.delGrop(row.id).then((res) => {
        console.log(res, "res");
        this.$message.success(res.data.message);
        this.$api.getGrop().then((res) => {
          this.tableData = res.data.data.data;
        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.liveBroadcast {
  width: 100%;
  height: 100%;
  .el-breadcrumb {
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
}
.top {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  li {
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 20px;
    span {
      width: 60px;
    }
    select {
      width: 100px;
      height: 35px;
      outline: none;
    }
  }
}
main {
  width: 100%;
  height: auto;
}
.el-pagination {
  margin: 15px 0;
}
</style>